<template>
  <div>
    <header>
      <div class="m-top">
        <!-- 版心 -->
        <div class="banxin_big">
          <h1 class="logo">
            <a href="javascript:;">网易云音乐</a>
          </h1>
          <ul class="m-nav">
            <li v-for="(item, index) in headerArr" :key="item.id">
              <span>
                <a
                  href="javascript:;"
                  :class="{ slt: $route.path === item.path }"
                  @click="$router.push(item.path)"
                >
                  <em>{{ item.text }}</em>
                  <sub :class="{ hot: headerArr.length - 1 == index }"></sub>
                  <sub v-show="$route.path === item.path" class="cor"></sub>
                </a>
              </span>
            </li>
          </ul>

          <div class="m-tophead" v-show="!$store.state.headerShow">
            <a
              href="javascript:;"
              class="link"
              @click.stop="udateLoginShow(true)"
              >登录</a
            >
          </div>
          <div class="m-tophead" v-show="$store.state.headerShow">
            <div class="head">
              <img :src="$store.state.avatarUrl" alt="" />
              <a href="javascript:;" class="link"></a>
              <i class="m-topmsg f-pa j-uflag">99+</i>
            </div>
            <ul>
              <li><i class="iconfont icon-weibiaoti2fuzhi12"></i>我的主页</li>
              <li><i class="iconfont icon-youjian"></i>我的消息</li>
              <li><i class="iconfont icon-wodedengji"></i>我的等级</li>
              <li><i class="iconfont icon-yinlehuiyuan"></i>VIP会员</li>
              <li><i class="iconfont icon-shezhi"></i>个人设置</li>
              <li>
                <i class="iconfont icon-renwuzhongxin-shimingrenzheng"></i
                >实名认证
              </li>
              <li @click="Logout"><i class="iconfont icon-guanbi"></i>退出</li>
            </ul>
          </div>

          <a class="m-topvd" href="javascript:;">创作者中心</a>

          <div class="m-srch">
            <div class="srchbg">
              <span class="parent">
                <input
                  type="text"
                  class="txt"
                  placeholder="音乐/视频/电台/用户"
                  onfocus="this.placeholder=''"
                  onblur="this.placeholder='音乐/视频/电台/用户'"
                />
                <label></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <Nav></Nav>
    </header>
  </div>
</template>

<script>
import Nav from "./Nav.vue";
import { mapMutations } from "vuex";
// import { userApi } from "@/http/api.js";
// import avatarUrl from "../assets/upload/users.jpg";
export default {
  components: { Nav },
  data() {
    return {
      // headerShow: false,
      // avatarUrl: avatarUrl,
      //头部添加一个数组
      headerArr: [
        { id: 1, path: "/home", text: "发现音乐 " },
        { id: 2, path: "/mySong", text: "我的音乐" },
        { id: 3, path: "/#", text: "朋友" },
        { id: 4, path: "/#", text: "商城" },
        { id: 5, path: "/#", text: "音乐人" },
        { id: 6, path: "/#", text: "下载客户端" },
      ],
    };
  },
  created() {
    this.$store.commit("isLogin");
  },
  methods: {
    ...mapMutations({
      udateLoginShow: "login/udateLoginShow",
    }),
    //注销登录
    Logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
/* 导航栏 */
.m-top {
  position: relative;
  height: 70px;
  background-color: #242424;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  .logo {
    float: left;
    width: 176px;
    height: 69px;
    background-position: 0 0;
    background: url(".././assets/images/topbar.png") no-repeat;
    a {
      float: left;
      width: 157px;
      height: 100%;
      padding-right: 20px;
      text-indent: -9999px;
    }
  }
  .m-nav {
    float: left;
    li {
      position: relative;
      zoom: 1;
      a {
        padding: 0 19px;
        text-align: center;
        line-height: 70px;
        color: #ccc;
        &:hover {
          background: #000;
        }
      }
      .slt {
        background: #000;
        color: #fff;
      }
    }
  }
}

.m-nav li,
.m-nav li span,
.m-nav a,
.m-nav a em {
  float: left;
  height: 70px;
  font-size: 14px;
}
.m-nav .cor {
  display: block;
  position: absolute;
  left: 50%;
  top: 64px;
  width: 12px;
  height: 7px;
  margin-left: -6px;
  overflow: hidden;
  background: url(".././assets/images/topbar.png") no-repeat;
  background-position: -226px 0;
}
.m-nav .hot {
  display: block;
  position: absolute;
  top: 21px;
  left: 100px;
  width: 28px;
  height: 19px;
  background: url(".././assets/images/topbar.png") no-repeat;
  background-position: -190px 0;
}

/* 搜索框 */
.m-srch,
.m-srch .srchbg {
  float: right;
  width: 158px;
  height: 32px;
}
.m-srch .srchbg {
  margin-top: 19px;
  background: url(".././assets/images/topbar.png") no-repeat;
  background-position: 0 -99px;
  background-color: #fff;
  border-radius: 32px;
}
.m-srch .parent {
  display: block;
  position: relative;
  margin: 7px 0 0 30px;
}
.m-srch .parent input {
  color: #333;
  line-height: 20px;
  width: 95%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
}
.m-srch .parent label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;

  cursor: text;
}
/* 创作者中心 */
.m-topvd {
  float: right;
  width: 90px;
  height: 32px;
  margin: 19px 0 0 12px;
  box-sizing: border-box;
  padding-left: 16px;
  border: 1px solid #4f4f4f;
  line-height: 31px;
  color: #ccc;
  border-radius: 20px;
  font-size: 12px;
}
.m-topvd:hover {
  color: #fff;
  border: 1px solid #ccc;
}
/* 登录 */
.m-tophead {
  position: relative;
  float: right;
  height: 45px;
  margin: 19px 0 0 20px;
  padding: 0 22px 0 0;
  background-position: right -47px;
  background-image: none;
  &:hover ul {
    display: block;
  }
  ul {
    position: absolute;
    left: -64px;
    top: 36px;
    display: none;
    z-index: 999;
    li {
      font-size: 14px;
      .iconfont {
        font-size: 14px;
      }
      i {
        margin-right: 10px;
      }
      background: #2b2b2b;
      color: #cccccc;
      width: 162px;
      line-height: 32px;
      text-indent: 12px;
      cursor: pointer;
      &:hover {
        background: #353535;
        color: #fff;
      }
    }
  }
}
.m-tophead .link {
  display: block;
  width: 28px;
  margin-top: 10px;
  color: #787878;
  font-size: 12px;
}
.m-tophead .link:hover {
  color: #686868;
  text-decoration: underline;
}
.m-tophead .head img {
  border-radius: 30px;
  width: 30px;
  height: 30px;
}
.m-topmsg {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  background: #c20c0c;
  border-radius: 18px;
  border: 1 px solid #242424;
  line-height: 16px;
  font-size: 12px;
  white-space: nowrap;
  color: #fff;
  text-align: center;
  position: absolute;
  top: -5px;
  left: 20px;
}
</style>
